<template>
	<view class="pager">
		<view class="searchbar" elevation="4px"> 
			<view class="search"><uni-search-bar radius="20" placeholder="姓名、手机号" clearButton="auto" cancelButton="false" @confirm="Search1" /></view>
			<uni-dd :list="SearchList" v-if="SearchList.length>0" @confirm="Search2"></uni-dd>
		</view>
		<!-- #ifdef APP-NVUE -->
		<list class="scroll-y">
			<refresh class="refresh" @refresh="onrefresh" @pullingdown="onpullingdown" :display="refreshing ? 'show' : 'hide'">
				<div class="refresh-view">
					<image class="refresh-icon" :src="refreshIcon" :style="{width: (refreshing || pulling) ? 0: '34rpx'}" :class="{'refresh-icon-active': refreshFlag}"></image>
					<loading-indicator class="loading-icon" animating="true" v-if="refreshing"></loading-indicator>
					<text class="loading-text">{{refreshText}}</text>
				</div>
			</refresh>
			<cell>
			<!-- #endif -->
			<view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view><view>6667788</view>
			<!-- #ifdef APP-NVUE -->
			</cell>
		</list>
		<!-- #endif -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				refreshing:false,
				refreshText:'下拉可以刷新',
				refreshFlag:true,
				showTips: false,
				pulling: false,
				refreshIcon: '',
				SearchList:[]
			};
		},
		onLoad() {
			
		},
		methods:{
			onrefresh(e) {
				
			    if (!this.refreshFlag) {
			        return;
			    }
			    this.refreshing = true;
			    this.refreshText = "正在刷新...";
			
			    setTimeout(() => {
			        //this.refreshData();
			        this.pulling = true;
			        this.refreshing = false;
					this.refreshFlag = false;
			        this.refreshText = "已刷新";
			        setTimeout(() => { // TODO fix ios和Android 动画时间相反问题
			            this.pulling = false;
			        }, 500);
			    }, 2000);
			},
			onpullingdown(e) {
			    if (this.refreshing || this.pulling) {
			        return;
			    }
			    if (Math.abs(e.pullingDistance) > Math.abs(e.viewHeight)) {
			        this.refreshFlag = true;
			        this.refreshText = "释放立即刷新";
			    } else {
			        this.refreshFlag = false;
			        this.refreshText = "下拉可以刷新";
			    }
			}
		}
	}
</script>

<style lang="scss">
	.searchbar{top:0rpx; position: relative; box-shadow:2px 2px 2px 2px #e8e8e8;}
	.pager{display:flex; flex:1; flex-direction: column;}
	.scroll-y {flex-direction: column;width: 750rpx;} 
	.refresh {width: 750rpx;height:64px; justify-content: center;}
	.refresh-view {flex-direction: row;flex-wrap: nowrap;align-items: center;justify-content: center;}
	.refresh-icon {width: 34rpx;height: 34rpx;transition-duration: .5s;transition-property: transform; transform: rotate(0deg);transform-origin: center;}
	.refresh-icon-active {transform: rotate(180deg);}
	.loading-icon {width: 20px;height: 20px;margin-right: 5px;color: #999999;}
	.loading-text {margin-left: 2px;font-size: 16px;color: #999999;}
	.loading-more {align-items: center;justify-content: center;padding-top: 10px;padding-bottom: 10px;text-align: center;}
	.loading-more-text {font-size: 28rpx;color: #999;}
</style>
